<!-- 外出登记页 -->
<template>
  <!-- 面包屑 -->
  <div style="margin: 20px;">
    <el-breadcrumb separator="/" style="line-height:35px">
      <el-breadcrumb-item><span style="color: #7A7A7A;">服务管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #7A7A7A;">用户管理</span></el-breadcrumb-item>
      <el-breadcrumb-item><span style="color: #0468FF;font-weight: bold">外出登记</span></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 搜索栏 -->
  <el-card style="margin: 20px;height: 70px;border: 0" shadow="never">
    <el-form>
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="老人姓名">
            <el-input placeholder="请输入老人姓名" v-model="searchForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外出时间">
            <el-date-picker
                type="date"
                placeholder="请选择日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                format="YYYY-MM-DD"
                v-model="searchForm.leaveTime"
                style="width: 300px;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="addArchivesView">新建登记</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 列表 -->
  <el-card style="margin:20px;border: 0" shadow="never">
    <el-table :data="currentTableData" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column prop="name" label="老人姓名" align="center"/>
      <el-table-column prop="roomNumber" label="房间号" align="center"/>
      <el-table-column prop="bedNumber" label="床位号" align="center" width="80"/>
      <el-table-column prop="leaveTime" label="外出时间" align="center" width="250"/>
      <el-table-column prop="status" label="外出状态" align="center">
        <template #default="{ row }">
          <el-tag :type="statusTagType[row.status]" hit style="width: 70px;">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="登记时间" align="center" width="250"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="look(scope.row.id)">查看</el-button>
          <el-button link type="danger" @click="deleteApplication(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-card>

  <!-- 新建登记弹窗-->
  <el-dialog :before-close="handleClose" fullscreen v-model="dialogVisible" style="background-color: #f0f2f5">
    <el-card style="position: relative;width: 1100px;margin:60px auto 0 auto;height: 520px;border: 0" shadow="never">

      <div style="position: absolute;background-color: #0468FF;width: 6px;
      height: 18px;border-radius: 5px;left: 25px;top: 44px;"></div>
      <div style="font-size: 18px;height: 80px;margin: 20px;">老人基本信息</div>

      <el-form label-width="140">
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="老人姓名">
              <el-input v-model="dialogForm.name" placeholder="请输入老人姓名" style="width: 230px;"></el-input>
              <el-button link type="primary" style="margin-left: 24px;" @click="openDialog">选择老人</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入住房间">
              <el-input v-model="dialogForm.roomNumber" disabled placeholder="选择老人后自动填充"
                        style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="床位号">
              <el-input v-model="dialogForm.bedNumber" disabled placeholder="选择老人后自动填充"
                        style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="陪同人">
              <el-input v-model="dialogForm.companion" placeholder="请输入陪同人" style="width: 230px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="外出时间">
              <el-date-picker
                  type="date"
                  v-model="dialogForm.leaveTime"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD"
                  style="width: 230px;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回院时间">
              <el-date-picker
                  type="date"
                  v-model="dialogForm.returnTime"
                  placeholder="请选择日期"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD"
                  style="width: 230px;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col :span="12">
            <el-form-item label="外出状态">
              <el-switch
                  size="large"
                  v-model="dialogForm.status"
                  active-text="外出已回"
                  inactive-text="外出中"
                  style="width: 220px;height: 30px;padding-left: 30px;"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-left: 25px;">
          <el-col>
            <el-form-item label="外出原因">
              <el-input style="width: 748px"
                        v-model="dialogForm.reason"
                        :rows="3"
                        type="textarea"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-card>
    <el-card style="width: 1100px;margin: 20px auto;border: 0;" shadow="never">
      <el-row :gutter="10">
        <el-col :span="20"></el-col>
        <el-col :span="4">
          <el-button style="margin-left: 20px;" @click="">重置</el-button>
          <el-button type="primary" @click="">保存</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>

  <!-- 选择老人弹窗 -->
  <el-dialog title="选择老人" v-model="dialogVisible2"
             :before-close="handleClose2"
             top="8vh"
             style="">
    <el-table :data="currentTableData2" height="550px"
              :row-style="{'height':'50px'}"
              :cell-style="{'color':'#000'}"
              :header-cell-style="{
                'background-color': '#f2f2f2',
                'color': '#000',
                'height':'50px'
              }">
      <el-table-column prop="id" label="档案编号" align="center" width="200"/>
      <el-table-column prop="name" label="姓名" align="center"/>
      <el-table-column prop="gender" label="性别" align="center"/>
      <el-table-column prop="age" label="年龄" align="center"/>
      <el-table-column prop="checkInTime" label="入院时间" align="center" width="200"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="select(scope.row.id)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="currentPage2"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dialogData.length"
        style="margin-top: 20px;margin-left: 5px;"
    />
  </el-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";

const searchForm = ref({name: '', leaveTime: ''})

//重置搜索栏
const resetSearch = () => {
  searchForm.value = {name: '', leaveTime: ''};
}
//表格数据
const tableData = ref([]);
const currentTableData = ref([]) // 当前页显示的数据
const currentPage = ref(1)      // 当前页码
const pageSize = ref(10)        // 每页条数

//加载表格数据
const loadPatient = () => {
  for (let i = 0; i < 16; i++) {
    tableData.value.push({
      name: '刘姥姥',
      roomNumber: '1101',
      bedNumber: '2',
      leaveTime: '2018-06-06 09:01:50',
      status: '外出中',
      createTime: '2018-06-06 09:01:50'
    });
    tableData.value.push({
      name: '刘姥姥',
      roomNumber: '1101',
      bedNumber: '2',
      leaveTime: '2018-06-06 09:01:50',
      status: '外出已回',
      createTime: '2018-06-06 09:01:50'
    })
  }
}
onMounted(() => {
  loadPatient()
})

// 获取数据（示例）
const fetchData = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();
  updateCurrentData();
}

// 更新当前页数据
const updateCurrentData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  currentTableData.value = tableData.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val
  updateCurrentData()
}

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  updateCurrentData()
}

// 生命周期钩子
onMounted(() => {
  fetchData()
})

//查看
const look = (id) => {
}
//删除
const deleteApplication = (id) => {
}

// 状态标签类型映射
const statusTagType = reactive({
  '外出中': 'danger',
  '外出已回': 'success'
})


//全屏弹窗
const dialogVisible = ref(false)
//弹窗表单
const dialogForm = ref({
  name: '',
  roomNumber: '',
  bedNumber: '',
  companion: '',
  leaveTime: '',
  returnTime: '',
  status: '',
  reason: ''
})
//重置
const reset = () => {
  dialogForm.value = {
    name: '',
    roomNumber: '',
    bedNumber: '',
    companion: '',
    leaveTime: '',
    returnTime: '',
    status: '',
    reason: ''
  }
}
//处理弹窗关闭
const handleClose = () => {
  reset()
  dialogVisible.value = false
}
//新增
const addArchivesView = () => {
  dialogVisible.value = true
}

//选择老人弹窗
const dialogVisible2 = ref(false)
onMounted(() => {
  loadDialogData()
})
const openDialog = () => {
  dialogData.value = []
  loadDialogData()
  dialogVisible2.value = true
}
//弹窗表格数据
const dialogData = ref([])
const currentTableData2 = ref([]) // 当前页显示的数据
const currentPage2 = ref(1)      // 当前页码
const pageSize2 = ref(10)        // 每页条数
//加载表格数据
const loadDialogData = () => {
  for (let i = 0; i < 15; i++) {
    dialogData.value.push({
      id: 'JK201806061552001',
      name: '刘姥姥',
      gender: '女',
      age: '65',
      checkInTime: '2018-06-06 14:20:30'
    })
  }
}

// 获取数据（示例）
const fetchData2 = async () => {
  // 这里替换为你的API请求
  // dataTable.value = await api.getData();
  updateCurrentData2();
}

// 更新当前页数据
const updateCurrentData2 = () => {
  const start = (currentPage2.value - 1) * pageSize2.value
  const end = start + pageSize2.value
  currentTableData2.value = dialogData.value.slice(start, end)
}

// 每页条数变化
const handleSizeChange2 = (val) => {
  pageSize2.value = val
  updateCurrentData2()
}

// 页码变化
const handleCurrentChange2 = (val) => {
  currentPage2.value = val
  updateCurrentData2()
}

// 生命周期钩子
onMounted(() => {
  fetchData2()
})

//处理弹窗关闭
const handleClose2 = () => {
  dialogData.value = [];
  dialogVisible2.value = false;
}

//弹窗中的选择操作
const select = (id) => {

}
</script>

<style scoped>

</style>